<template>
	<div class="password-update-container">
		<div class="password-update-box">
			<h2 class="password-update-title">修改密码</h2>
			<van-form @submit="onSubmit" class="password-update-form">
				<van-field label="编号" v-model="userForm.id" readonly class="password-update-field" />
				<van-field label="用户名" v-model="userForm.name" type="text" class="password-update-field" />
				<van-field label="原来密码" v-model="userForm.password" type="password" placeholder="请输入原密码"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]" class="password-update-field" />
				<van-field label="新的密码" v-model="userForm.password2" type="password" placeholder="请输入新密码"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]" class="password-update-field" />
				<van-field label="确认密码" v-model="userForm.password22" type="password" placeholder="请输入新密码"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]" class="password-update-field" />
				<div class="button-container">
					<van-button round block type="info" native-type="submit" class="submit-button">
						提交
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';
	import {
		updatePwdAPI
	} from "@/api/user.js";
	import {
		getUserLocal
	} from "@/utils/auth.js";

	export default {
		data() {
			return {
				userForm: {
					id: null,
					name: "",
					password: "",
					password2: "", // 新的密码
					password22: "" // 确认密码
				},
				//规则:字母数字‘6~12
				regNamePwd: /^[a-z0-9]{3,12}$/i,
			};
		},
		mounted() {
			// 获取本地存储的用户信息
			const user = getUserLocal();
			if (user) {
				this.userForm.id = user.id;
				this.userForm.name = user.name;
			}
		},
		methods: {
			// 处理提交保存
			async onSubmit() {
				// 检查新密码和确认密码是否一致
				if (this.userForm.password2 !== this.userForm.password22) {
					showToast("确认密码两次输入不一致");
					return;
				}

				// 复制表单数据并删除确认密码字段
				const user = {
					...this.userForm
				};
				delete user.password22;

				try {
					// 调用 API 更新密码
					await updatePwdAPI(user);
					showToast("密码更改成功！");
					// 导航到用户页面
					this.$router.push({
						name: "user"
					});
					// 重置表单数据
					this.userForm = {
						id: null,
						name: "",
						password: "",
						password2: "",
						password22: ""
					};
				} catch (error) {
					console.error('密码更改失败:', error);
					showToast("密码更改失败，请稍后重试。");
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	@bg-color: #f5f5f5;
	@primary-color: #007bff;
	@secondary-color: #e9ecef;
	@text-color: #333;
	@border-color: #ced4da;

	.password-update-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: @bg-color;
	}

	.password-update-box {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 30px;
		width: 400px;
	}

	.password-update-title {
		text-align: center;
		color: @text-color;
		margin-bottom: 20px;
		font-size: 24px;
	}

	.password-update-form {
		.password-update-field {
			margin-bottom: 15px;
			border-bottom: 1px solid @border-color;
			padding-bottom: 10px;

			.van-field__label {
				color: @text-color;
				font-weight: bold;
			}

			.van-field__control {
				color: @text-color;
			}
		}
	}

	.button-container {
		margin-top: 20px;
	}

	.submit-button {
		background-color: @primary-color;
		color: #fff;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: darken(@primary-color, 10%);
		}
	}
</style>